<template>
	<div id="Goods">
		<div class="menu menu-wrapper" ref="menu-wrapper">
			<ul class="list">
				<li @click="toggleCategory(good.name)" :class="{current:current==good.name}" v-for="(good,index) in merchantGoods" :key="index">
					<img v-if="good.icon" :src="good.icon">
					<span class="text">{{good.name}}</span>	
				</li>
			</ul>
		</div>
		<div class="foodList food-wrapper" ref="food-wrapper">
			<ul class="good-hocks">
				<li v-for="(good,index) in merchantGoods" :key="index">
					<div class="h1">{{good.name}}</div>
					<ul class="foods">
						<li v-for="(food,index) in good.foods" :key="index">
							<img :src="food.image" >
							<div class="foodinfo">
								<div>{{food.name}}</div>
								<div class="text-gray">甜粥</div>
								<div class="text-gray">月售{{food.sellCount}}份 好评率{{food.rating}}%</div>
								<div class="priceRow">
									<div class="price">￥{{food.price}}</div>
									<CarCotrol :food="food" />
								</div>
							</div>
						</li>
					</ul>
				</li>
			</ul>
		</div>
		<shop-car/>
	</div>
</template>

<script>
import { mapState } from 'vuex'
import shopCar from '@/components/shopCar.vue';
import CarCotrol from '@/components/carCotrol.vue';
	export default {
  	components: { shopCar, CarCotrol },
    data() {
        return {
            current: "优惠",
            scrollY: 0,
            tops: [] //右侧的标题组成的List
        };
    },
    methods: {
        toggleCategory(name) {
            this.current = name;
        }
    },
    computed: {
        ...mapState(["merchantGoods"]),
        // 当前分类的下标
        currentIndex() {
        }
    },
    mounted() {
    },
    watch: {
        merchantGoods(newValue) {
			
        }
    },
}
</script>

<style lang="scss" scoped>
@import "../../scss/GLOBAL.scss";
#Goods {
	user-select: none;
	height: 58%;
	display: flex;
	align-items: flex-start;
	.menu {
		background-color: #F3F5F7;
		width: 6em;
		.list {
			li {
				display: flex;
				align-items: center;
				font-size: .9em;
				padding: 15px 10px;
				img {
					width: 15px;
				}
				.text {
					margin-left: 5px;
				}
				&.current {
					background-color: #fff;
				}
			}
		}
	}
	.foodList {
		&.food-wrapper {
			height: 100%;
			overflow-y: auto;
		}
		flex: 1;
		.good-hocks {
			.h1 {
				background-color: #F3F5F7;
				padding: 5px 10px;
				font-size: .9em;
			}
			.foods {
				li {
					display: flex;
					font-size: .9em;	
					align-items: center;
					img {
						padding: 10px 5px;
						width: 30%;
					}
					.foodinfo {
						flex: 1;
						padding: 5px 10px;
						.text-gray {
							color: #979B9F;
						}
					}
					.priceRow {
						display: flex;
						justify-content: space-between;
						.price {
							color:#ED4A36;
							font-weight: bold;
						}
						
					}
				}
			}
		}
	}
}
</style>